<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
  <div th:fragment="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box">
          <div class="box-header">
            <!-- 按钮组 -->
            <div class="btn-group operation">
              <button id="btn_add" type="button" class="btn bg-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
              </button>
              <button id="btn_edit" type="button" class="btn bg-info">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
              </button>
              <button id="btn_delete" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
              </button>
            </div>
            <!-- end 按钮组 -->
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="categories" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>分类ID</th>
                  <th>分类名称</th>
                  <th>父级分类</th>
                  <th>描述</th>
                  <th>创建时间</th>
                </tr>
              </thead>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    
    <script th:inline="none">
      $(function() {
        // 初始化分类表格
        var table = $('#categories').DataTable({
          'ajax': 'article/categoryList',
          'paging': true,
          'lengthChange': true,
          'searching': true,
          'ordering': true,
          'info': true,
          'autoWidth': false,
          'columns': [
            { 'data': 0 },
            { 'data': 1 },
            { 'data': 2 },
            { 'data': 3 },
            { 'data': 4 }
          ],
          'language': {
            'lengthMenu': '每页显示 _MENU_ 条记录',
            'zeroRecords': '暂无记录',
            'info': '第 _PAGE_ 页 / 共 _PAGES_ 页',
            'infoEmpty': '暂无记录',
            'infoFiltered': '(从 _MAX_ 条记录中筛选)',
            'search': '搜索:',
            'paginate': {
              'first': '首页',
              'last': '末页',
              'next': '下一页',
              'previous': '上一页'
            }
          }
        });
        
        // 绑定表格选择行事件
        $('#categories tbody').on('click', 'tr', function() {
          if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
          } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
          }
        });
        
        // 加载父级分类下拉框
        function loadParentCategories() {
          $.getJSON(
            'article/parentCategories',
            function(result) {
              $("#sel_add_parent").empty();
              $("#sel_edit_parent").empty();
              
              // 添加"无父级"选项
              $("#sel_add_parent").append('<option value="0">无父级</option>');
              $("#sel_edit_parent").append('<option value="0">无父级</option>');
              
              $.each(result.data, function(index, item) {
                var option = '<option value="' + item.cid + '">' + item.cname + '</option>';
                $("#sel_add_parent").append(option);
                $("#sel_edit_parent").append(option);
              });
            }
          );
        }
        
        // 页面加载时初始化父级分类
        loadParentCategories();
        
        // 绑定添加按钮事件
        $('#btn_add').click(function() {
          $('#modal-add').modal();
        });
        
        // 绑定编辑按钮事件
        $('#btn_edit').click(function() {
          var cid;
          try {
            cid = table.row('.selected').data()[0];
          } catch(err) {
            return;
          }
          
          $.getJSON(
            'article/category/' + cid,
            function(data) {
              $("#edit_cid").val(data.cid);
              $("#edit_cname").val(data.cname);
              $("#edit_description").val(data.description);
              $("#sel_edit_parent").val(data.parent_id);
              $('#modal-edit').modal();
            }
          );
        });
        
        // 绑定删除按钮事件
        $('#btn_delete').click(function() {
          var cid;
          try {
            cid = table.row('.selected').data()[0];
          } catch(err) {
            return;
          }
          
          if (!confirm('确认删除此分类吗?')) {
            return;
          }
          
          $.post(
            'article/deleteCategory',
            {'cid': cid},
            function(obj) {
              if (obj.Status == 'ok') {
                table.ajax.reload();
              } else {
                alert(obj.msg);
              }
            },
            'json'
          );
        });
        
        // 添加分类
        $('#btn_save_category').click(function() {
          var cname = $('#add_cname').val();
          
          if (!cname || cname.trim() === '') {
            alert('分类名称不能为空');
            return;
          }
          
          var data = $('#add_category_form').serialize();
          
          $.post(
            'article/addCategory',
            data,
            function(obj) {
              if (obj.Status == 'ok') {
                table.ajax.reload();
                $('#modal-add').modal('hide');
                // 清空表单
                $('#add_category_form')[0].reset();
                // 重新加载父级分类
                loadParentCategories();
              } else {
                alert(obj.msg || '添加失败，请稍后再试');
              }
            },
            'json'
          );
        });
        
        // 修改分类
        $('#btn_update_category').click(function() {
          var cname = $('#edit_cname').val();
          var cid = $('#edit_cid').val();
          
          if (!cname || cname.trim() === '') {
            alert('分类名称不能为空');
            return;
          }
          
          if (!cid || cid <= 0) {
            alert('无效的分类ID');
            return;
          }
          
          // 检查是否设置了自己为自己的父级
          var parent_id = $('#sel_edit_parent').val();
          if (parent_id == cid) {
            alert('不能将分类的父级设置为自己');
            return;
          }
          
          var data = $('#edit_category_form').serialize();
          
          $.post(
            'article/updateCategory',
            data,
            function(obj) {
              if (obj.Status == 'ok') {
                table.ajax.reload();
                $('#modal-edit').modal('hide');
                // 重新加载父级分类
                loadParentCategories();
              } else {
                alert(obj.msg || '更新失败，请稍后再试');
              }
            },
            'json'
          );
        });
      });
    </script>
    
    <!-- 添加模态框 -->
    <div class="modal fade" id="modal-add">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">添加分类</h4>
          </div>
          <div class="modal-body">
            <div class="box box-primary">
              <!-- form start -->
              <form role="form" id="add_category_form">
                <div class="box-body">
                  <div class="form-group">
                    <label for="add_cname">分类名称</label>
                    <input type="text" class="form-control" id="add_cname" name="cname" placeholder="分类名称" required>
                  </div>
                  <div class="form-group">
                    <label for="sel_add_parent">父级分类</label>
                    <select class="form-control" id="sel_add_parent" name="parent_id">
                      <option value="0">无父级</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="add_description">描述</label>
                    <textarea class="form-control" id="add_description" name="description" placeholder="分类描述" rows="3"></textarea>
                  </div>
                </div>
                <!-- /.box-body -->
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="btn_save_category">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- end 添加模态框 -->
    
    <!-- 编辑模态框 -->
    <div class="modal fade" id="modal-edit">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">修改分类</h4>
          </div>
          <div class="modal-body">
            <div class="box box-primary">
              <!-- form start -->
              <form role="form" id="edit_category_form">
                <div class="box-body">
                  <input type="hidden" id="edit_cid" name="cid">
                  <div class="form-group">
                    <label for="edit_cname">分类名称</label>
                    <input type="text" class="form-control" id="edit_cname" name="cname" placeholder="分类名称" required>
                  </div>
                  <div class="form-group">
                    <label for="sel_edit_parent">父级分类</label>
                    <select class="form-control" id="sel_edit_parent" name="parent_id">
                      <option value="0">无父级</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="edit_description">描述</label>
                    <textarea class="form-control" id="edit_description" name="description" placeholder="分类描述" rows="3"></textarea>
                  </div>
                </div>
                <!-- /.box-body -->
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="btn_update_category">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- end 编辑模态框 -->
  </div>
</body>
</html> 